import React, { memo, useState } from "react";
import HeaderWrapper from "./style";
import { RightOutlined, LeftOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { Alert, Input, Switch } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { changeLoading, changeTheme } from "@/store/modules/themeSlice.js";
import ChangeTheme from "@/util/ChangeTheme";
import { getSearchHotInfo } from "@/store/modules/searchSlice";

const index = memo(() => {
  const nav = useNavigate();
  const dispatch = useDispatch();
  const [msg, changeMsg] = useState("");
  const back = () => {
    nav(-1);
  };
  const forward = () => {
    nav(1);
  };
  const onChangeStatus = (boolean) => {
    ChangeTheme(boolean);
    dispatch(changeTheme(boolean));
  };
  const onChange = (e) => {
    changeMsg(e.target.value);
  };
  const [isNoMsg, changeIsNoMsg] = useState(false);
  const [isShowHotSh, changeIsShowHotSh] = useState(false);
  const onSearch = (e) => {
    if (!msg.trim()) {
      changeIsNoMsg(true);
      setTimeout(() => {
        changeIsNoMsg(false);
      }, 1000);
      return;
    }
    changeIsShowHotSh(false);
    nav("/search/" + msg);
    // dispatch(changeLoading(true))
  };
  const { Search } = Input;
  const onBlur = () => {
    setTimeout(()=>{
      changeIsShowHotSh(false);
    },300)
  };
  const onFocus = () => {
    changeIsShowHotSh(true);
    if(searchHot.length<=0)dispatch(getSearchHotInfo());
  };
  const searchHot = useSelector((state) => {
    return state.search.searchHot;
  });
  const changeHotmsg = (m)=>{
    changeMsg(m);
    nav("/search/" + m);
  }
  return (
    <HeaderWrapper>
      <div className="left">
        <div className="route">
          <LeftOutlined className="route_left" onClick={back} />
          <RightOutlined onClick={forward} className="route_right" />
        </div>
        <div className="search" style={{ position: "relative" }}>
          <Search
            placeholder="搜索音乐"
            onChange={onChange}
            onSearch={onSearch}
            style={{ width: 200 }}
            onBlur={onBlur}
            onFocus={onFocus}
            value={msg}
          />
          {isShowHotSh && (
            <ul className="hotSearch" style={{ position: "absolute" }}>
              <li>热门搜索</li>
              {searchHot?.slice(0,5).map((n, i) => {
                return (
                  <li key={i} onClick={e=>changeHotmsg(n.searchWord)}>
                    <span>{n.searchWord}</span>
                    <span>{n.content}</span>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
        {/* <Input placeholder="Basic usage" /> */}
      </div>
      <div className="right">
        <Switch
          id="module"
          checkedChildren="亮色模式"
          onChange={onChangeStatus}
          unCheckedChildren="暗色模式"
          defaultChecked
        />
      </div>
      <div className="fiexd">
        {isNoMsg && <Alert message="搜索内容不能为空！" type="warning" />}
      </div>
    </HeaderWrapper>
  );
});

export default index;
